// 已申请配额客户列表
import * as React from 'react';
import { useRef, useState, useEffect } from 'react';
import { getBrandSelectList, getDealerListByBrand } from '@/common/Request'
import './index.scss';
import { Button, Col, Form, Input, Row, DatePicker, Table, Select, Spin } from 'antd';
import { http } from '@/lib';
import apis from '@/apis/Report';

// 标题
const HeaderTitle = (props) => {
    const {onReturn} = props;
    return (
        <div>
            
            <Row align="middle" justify="space-around" gutter={24}>
                <Col offset={0} span={4}>
                    <span className="AppliedCustomerList-header-title">已申请配额客户列表</span>
                </Col>
                <Col offset={18} span={2}>
                    <Button onClick={() => {
                        onReturn();
                    }} type="primary">返回</Button>
                </Col>
            </Row>
        </div>
    )
} 

const AppliedCustomerList = (props) => {
    // 设置table的标题样式
    // const TableTitleStyle = {fontWeight:'bolder', color:'#000', textAlign: 'center', alignItems: 'center'} as any;
    const TableTitleStyle = {} as any;
    // 设置已申请配额客户数量合未申请配额客户数量的ui样式
    const spanUI = {color: '#1890FF', cursor: 'pointer'} as any;
    // 点击查看详情跳转到指定的详情页面
    const onCheckDetailClick = (record) => {
        props.history.push({pathname: `/report/quotaapllyreport/appliedcustomerlist/quotaapplieddetaillist/${record.id}`, state: record})
    }
    // table的列标题
    const columns = [
        {
            title: <span style={TableTitleStyle}>序号</span>,
            key: 'number',
            align: 'center',
            render: (text, record, index) => {
                return <span>{index+1}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>客户编码</span>,
            key: 'dealerCode',
            dataIndex: 'dealerCode',
            align: 'center'
        },
        {
            title: <span style={TableTitleStyle}>客户名称</span>,
            key: 'dealerName',
            dataIndex: 'dealerName',
            align: 'center'
        },
        {
            title: <span style={TableTitleStyle}>客户类型</span>,
            key: 'dealerType',
            dataIndex: 'dealerType',
            align: 'center',
            render: () => {
                return '经销商';
            }
        },
        {
            title: <span style={TableTitleStyle}>销售组织</span>,
            key: 'brandName',
            dataIndex: 'brandName',
            align: 'center'
        },
        {
            title: <span style={TableTitleStyle}>所属管理区域</span>,
            key: 'belongAreaName',
            dataIndex: 'belongAreaName',
            align: 'center'
        },
        {
            title: <span style={TableTitleStyle}>配额周期</span>,
            key: 'quotaStartTime',
            align: 'center',
            render: (text, record, index) => {
                if (!record.quotaStartTime || !record.quotaEndTime) {
                    return '--';
                }
                let year = record.quotaStartTime.split('-')[0];
                let month = record.quotaStartTime.split('-')[1];
                return <span>{year + '年' + month + '月'}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>配额有效期</span>,
            key: 'quotaTerm',
            dataIndex: 'quotaTerm',
            align: 'center',
            render: (text, record, index) => {
                if (!record.quotaStartTime || !record.quotaEndTime) {
                    return '--';
                }
                let start = record.quotaStartTime.split('-');
                start[2] = start[2].split(' ')[0];
                let end = record.quotaEndTime.split('-');
                end[2] = end[2].split(' ')[0];
                let s:string = '';
                start.forEach(item => {
                    s += item + '-';
                })
                end.forEach((item, index) => {
                    index !== end.length - 1 ? s += item + '-' : s += item;
                })
                s.slice(-1);
                return <span>{s}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>最后申请时间</span>,
            key: 'createTime',
            dataIndex: 'createTime',
            align: 'center'
        },
        {
            title: <span style={TableTitleStyle}>最后操作人</span>,
            key: 'updateName',
            dataIndex: 'updateName',
            align: 'center'
        },
        {
            title: <span style={TableTitleStyle}>操作</span>,
            key: 'action',
            align: 'center',
            render: (text, record, index) => {
                return <span style={spanUI} onClick={() => {
                    onCheckDetailClick(record)
                }}>查看详情</span>
            }
        },
    ]
    // table的pagination
    const [pagination, setPagination] = useState({
        page: 1, current: 1, pageSize: 10, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'], total: 0,
        showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`
    });
    // table的dataSource
    const [dataSource, setDataSource] = useState([]);
    // table的loading
    const [loading, setLoading] = useState(false);
    let belongAreaCode;
    let pathnameStr;
    pathnameStr = props.history.location.pathname.split('/');
    belongAreaCode = sessionStorage.getItem('belongAreaCodeForQuota') || pathnameStr[pathnameStr.length - 1].split('&')[0];
    // console.log(props);
    useEffect(() => {
        if (!sessionStorage.getItem('hasNumberPlateListForQuota') 
            || sessionStorage.getItem('hasNumberPlateListForQuota') === 'undefined' 
            || sessionStorage.getItem('hasNumberPlateListForQuota') === 'null') {
            sessionStorage.setItem('hasNumberPlateListForQuota', JSON.stringify(props.location.state?.record?.inventoryCustomerBeanListVo?.hasNumberPlateList));
            sessionStorage.setItem('belongAreaCodeForQuota', pathnameStr[pathnameStr.length - 1].split('&')[0]);
            // let h = JSON.parse(sessionStorage.getItem('hasNumberPlateListForQuota'));
            // let inventoryCycle = props.location.state?.record?.inventoryTime.split('-');
            // inventoryCycle[1] = parseInt(inventoryCycle[1]) + '月';
            // inventoryCycle[0] = inventoryCycle[0] + '年';
            // inventoryCycle = inventoryCycle.join('');
            // sessionStorage.setItem('inventoryCycle', JSON.stringify(inventoryCycle));
        }
    }, [])
    // 做假数据，未来这个位置应当从服务器获取数据
    useEffect(() => {
        setLoading(true);
        let hasNumberPlateListForQuota = props.location.state?.record?.inventoryCustomerBeanListVo?.hasNumberPlateList || JSON.parse(sessionStorage.getItem('hasNumberPlateListForQuota'))
        // let inventoryCycle = JSON.parse(sessionStorage.getItem('inventoryCycle'));
        http.post(apis.HasAppliedForQuotaClientList, {page: pagination.page, size: pagination.pageSize, belongAreaCode: belongAreaCode, hasNumberPlateList: hasNumberPlateListForQuota, 
            // inventoryCycle:inventoryCycle
        })
            .then(res => {
                let data = res.data.content;
                data.forEach((item, index) => {
                    item.key = index;
                });
                setDataSource(data);
                setPagination({...pagination, total: res.data.totalElements})
                setLoading(false);
            })
            .catch(err => {
                setLoading(false);
            })
        
    }, [pagination.page, pagination.pageSize])
    
    // 返回上级页面的方法
    const onReturn = () => {
        sessionStorage.removeItem('hasNumberPlateListForQuota')
        sessionStorage.removeItem('noNumberPlateListForQuota')
        sessionStorage.removeItem('belongAreaCodeForQuota')
        sessionStorage.removeItem('inventoryCycle');
        props.history.go(-1);
    }
    return (
        <React.Fragment>
            <HeaderTitle onReturn={onReturn}/>
            <Spin spinning={loading}>
                <Table 
                    columns={columns as any}
                    pagination={pagination}
                    dataSource={dataSource}
                    onChange={(pageOptions) => {
                        setPagination({
                            ...pagination,
                            pageSize: pageOptions.pageSize,
                            current: pageOptions.current,
                            page: pageOptions.current,
                        })
                    }}
                />
            </Spin>
        </React.Fragment>
    )
}

export default AppliedCustomerList;